<template>
  <div class="table-filter-date-range-comp pad-rgt-10">
    <div :class="`table-filter-${type}`">
      <el-date-picker
        v-model="startTime"
        :picker-options="startPickerOption"
        :placeholder="startPlaceholder"
        :type="type"
        size="small"
        @change="change">
      </el-date-picker>
      <span class="font-size-14">至</span>
      <el-date-picker
        v-model="endTime"
        :picker-options="endPickerOption"
        :placeholder="endPlaceholder"
        :type="type"
        size="small"
        @change="change">
      </el-date-picker>
    </div>
  </div>
</template>

<script>

  import {messageHandle} from "@/utils";
  import {momentFormat} from "@/config/common";
  import {msgCode} from "@/config/string";

  export default {
    name: 'TableFilterDateTime',
    model: {
      event: 'change'
    },
    props: {
      value: {
        type: Object,
        default: () => {
          return {
            begin: '',
            end: ''
          };
        }
      },
      type: {
        type: String,
        default: 'datetime'
      }
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        startPlaceholder: '',
        endPlaceholder: '',
        startPickerOption: {},
        endPickerOption: {}
      };
    },
    watch: {
      value: {
        handler(val = {}) {
          this.startTime = val.begin || '';
          this.endTime = val.end || '';
        },
        immediate: true
      },
      // 设置开始时间的禁用日期
      startTime: {
        handler(val = '') {
          if (val) {
            this.endPickerOption = Object.assign({}, this.endPickerOption, {
              disabledDate: (date) => {
                if (date < new Date(val).getTime()) {
                  return true;
                }
              }
            });
          } else {
            this.endPickerOption = Object.assign({}, this.endPickerOption, {
              disabledDate: () => {
                return false;
              }
            });
          }
        },
        immediate: true
      },
      // 设置结束时间的禁用日期
      endTime: {
        handler(val = '') {
          if (val) {
            this.startPickerOption = Object.assign({}, this.startPickerOption, {
              disabledDate: (date) => {
                if (date > new Date(val).getTime()) {
                  return true;
                }
              }
            });
          } else {
            this.startPickerOption = Object.assign({}, this.startPickerOption, {
              disabledDate: () => {
                return false;
              }
            });
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.initConfig();
    },
    methods: {
      initConfig() {
        this.startPlaceholder = '开始时间';
        this.endPlaceholder = '结束时间';
      },
      change() {
        const start = this.startTime;
        const end = this.endTime;
        if (!start && !end) {
          this.$emit('change', {begin: '', end: ''});
        } else {
          if (start && end) {
            const startTime = moment(start).format(momentFormat.timestampDetail);
            const endTime = moment(end).format(momentFormat.timestampDetail);
            if (startTime > endTime) {
              messageHandle({code: msgCode.OPERATE_ERROR, msg: '开始时间不能大于结束时间！'});
              return;
            }
          }
          this.$emit('change', {begin: start, end: end});
        }
      },
      reset() {
        this.$emit('change', {begin: '', end: ''});
      }
    }
  };
</script>

<style scoped>
</style>
